<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <script src="/kissy/build/seed-debug.js" charset="utf-8"></script>
    <script src="/kissy/src/package.js"></script>
    <script src="/kissy/src/log.js"></script>
</head>
<body>

<h1>test draf event</h1>

<div id='t'
     style='border:1px solid green;
     -ms-touch-action:none;
     position: absolute;
     left:20px;
     top:100px;
     width:150px;height:150px;'>
    <p>drag me</p>

    <p>
        <a href="http://www.g.cn">link</a>
        <img src="http://gtms02.alicdn.com/tps/i2/T1AT0VFx8rXXazuKP7-520-280.jpg"
             width="20px"
             height="20px"/>
    </p>

    <p>
        <input style="width: 100px"/>
    </p>
</div>

<div style="height: 900px;"></div>
<div style="height: 900px;"></div>
<script>
    KISSY.use('node,event/gesture/pan', function (S, Node, PanGesture) {
        var left = 0;
        var top = 0;
        var $ = Node.all;
        var t = $('#t');
        t.on('dragstart', function (e) {
            e.preventDefault();
        });
        t.on(PanGesture.PAN_START, function (e) {
            e.preventDefault();
            left = parseInt(t.css('left'));
            top = parseInt(t.css('top'));
        });
        t.on(PanGesture.PAN, function (e) {
            t.css({
                left: e.deltaX + left,
                top: e.deltaY + top
            });
            e.preventDefault();
        });
        t.on(PanGesture.PAN_END, function (e) {
            log(e.direction + ' : ' + e.velocityX + ' : ' + e.velocityY);
        });
    });
</script>
</body>
</html>